<template>
    <div class="ui-buttons">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-title">
                                <h4>Default Button Style </h4>

                            </div>
                            <div class="button-list">
                                <p class="text-muted m-b-15">
                                    Use the button classes on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.
                                </p>
                                <button type="button" class="btn btn-default m-b-10">Default</button>
                                <button type="button" class="btn btn-primary m-b-10 m-l-5">Primary</button>
                                <button type="button" class="btn btn-success m-b-10 m-l-5">Success</button>
                                <button type="button" class="btn btn-info m-b-10 m-l-5">Info</button>
                                <button type="button" class="btn btn-warning m-b-10 m-l-5">Warning</button>
                                <button type="button" class="btn btn-danger m-b-10 m-l-5">Danger</button>
                                <button type="button" class="btn btn-pink m-b-10 m-l-5">Pink</button>
                                <button type="button" class="btn btn-dark m-b-10 m-l-5">Dark</button>
                                <button type="button" class="btn btn-link m-b-10 m-l-5">Link</button>
                            </div>
                        </div>
                        <!-- /# card -->
                    </div>
                    <!-- /# column -->
                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-title">
                                <h4>Rounded Button </h4>

                            </div>
                            <div class="button-list">
                                <p class="text-muted m-b-15">
                                    Add <code>.btn-rounded</code> to get clean rounded button.
                                </p>
                                <button type="button" class="btn btn-default btn-rounded m-b-10">Default</button>
                                <button type="button" class="btn btn-primary btn-rounded m-b-10 m-l-5">Primary</button>
                                <button type="button" class="btn btn-success btn-rounded m-b-10 m-l-5">Success</button>
                                <button type="button" class="btn btn-info btn-rounded m-b-10 m-l-5">Info</button>
                                <button type="button" class="btn btn-warning btn-rounded m-b-10 m-l-5">Warning</button>
                                <button type="button" class="btn btn-danger btn-rounded m-b-10 m-l-5">Danger</button>
                                <button type="button" class="btn btn-pink btn-rounded m-b-10 m-l-5">Pink</button>
                                <button type="button" class="btn btn-dark btn-rounded m-b-10 m-l-5">Dark</button>
                                <button type="button" class="btn btn-link btn-rounded m-b-10 m-l-5">Link</button>
                            </div>
                        </div>
                        <!-- /# card -->
                    </div>
                    <!-- /# column -->
                </div>
                <!-- /# row -->

                <div class="row">
                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-title">
                                <h4>Outline Button </h4>


                            </div>
                            <div class="button-list">
                                <p class="text-muted m-b-15">
                                    Add <code>.btn-outline</code>, <code>.btn-rounded</code> to get clean outline rounded button.
                                </p>
                                <button type="button" class="btn btn-default btn-outline m-b-10">Default</button>
                                <button type="button" class="btn btn-primary btn-outline m-b-10 m-l-5">Primary</button>
                                <button type="button" class="btn btn-success btn-outline m-b-10 m-l-5">Success</button>
                                <button type="button" class="btn btn-info btn-outline m-b-10 m-l-5">Info</button>
                                <button type="button" class="btn btn-warning btn-outline m-b-10 m-l-5">Warning</button>
                                <button type="button" class="btn btn-danger btn-outline m-b-10 m-l-5">Danger</button>
                                <button type="button" class="btn btn-pink btn-outline m-b-10 m-l-5">Pink</button>
                                <button type="button" class="btn btn-dark btn-outline m-b-10 m-l-5">Dark</button>
                                <button type="button" class="btn btn-link btn-outline m-b-10 m-l-5">Link</button>
                            </div>
                        </div>
                        <!-- /# card -->
                    </div>
                    <!-- /# column -->

                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-title">
                                <h4>Outline Button </h4>

                            </div>
                            <div class="button-list">
                                <p class="text-muted m-b-15">
                                    Add <code>.btn-outline</code>, <code>.btn-rounded</code> to get clean outline rounded button.
                                </p>
                                <button type="button" class="btn btn-default btn-outline btn-rounded m-b-10">Default</button>
                                <button type="button" class="btn btn-primary btn-outline btn-rounded m-b-10 m-l-5">Primary</button>
                                <button type="button" class="btn btn-success btn-outline btn-rounded m-b-10 m-l-5">Success</button>
                                <button type="button" class="btn btn-info btn-outline btn-rounded m-b-10 m-l-5">Info</button>
                                <button type="button" class="btn btn-warning btn-outline btn-rounded m-b-10 m-l-5">Warning</button>
                                <button type="button" class="btn btn-danger btn-outline btn-rounded m-b-10 m-l-5">Danger</button>
                                <button type="button" class="btn btn-pink btn-outline btn-rounded m-b-10 m-l-5">Pink</button>
                                <button type="button" class="btn btn-dark btn-outline btn-rounded m-b-10 m-l-5">Dark</button>
                                <button type="button" class="btn btn-link btn-outline btn-rounded m-b-10 m-l-5">Link</button>
                            </div>
                        </div>
                        <!-- /# card -->
                    </div>
                    <!-- /# column -->
                </div>
                <!-- /# row -->

                <div class="row">

                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-title">
                                <h4>Flat Button </h4>

                            </div>
                            <div class="button-list">
                                <p class="text-muted m-b-15">
                                    Add <code>.btn-flat</code> to get clean flat button.
                                </p>
                                <button type="button" class="btn btn-default btn-flat m-b-10">Default</button>
                                <button type="button" class="btn btn-primary btn-flat m-b-10 m-l-5">Primary</button>
                                <button type="button" class="btn btn-success btn-flat m-b-10 m-l-5">Success</button>
                                <button type="button" class="btn btn-info btn-flat m-b-10 m-l-5">Info</button>
                                <button type="button" class="btn btn-warning btn-flat m-b-10 m-l-5">Warning</button>
                                <button type="button" class="btn btn-danger btn-flat m-b-10 m-l-5">Danger</button>
                                <button type="button" class="btn btn-pink btn-flat m-b-10 m-l-5">Pink</button>
                                <button type="button" class="btn btn-dark btn-flat m-b-10 m-l-5">Dark</button>
                                <button type="button" class="btn btn-link btn-flat m-b-10 m-l-5">Link</button>
                            </div>
                        </div>
                        <!-- /# card -->
                    </div>
                    <!-- /# column -->

                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-title">
                                <h4>Button Addon </h4>

                            </div>
                            <div class="button-list">
                                <p class="text-muted m-b-15">
                                    Add <code>.btn-addon</code>,<code>.btn-addon i</code> to get clean button addon.
                                </p>
                                <button type="button" class="btn btn-primary btn-flat btn-addon m-b-10 m-l-5"><i class="ti-plus"></i>Primary</button>
                                <button type="button" class="btn btn-success btn-flat btn-addon m-b-10 m-l-5"><i class="ti-minus"></i>Success</button>
                                <button type="button" class="btn btn-info btn-flat btn-addon m-b-10 m-l-5"><i class="ti-close"></i>Info</button>
                                <button type="button" class="btn btn-warning btn-flat btn-addon m-b-10 m-l-5"><i class="ti-user"></i>Warning</button>
                                <button type="button" class="btn btn-danger btn-flat btn-addon m-b-10 m-l-5"><i class="ti-settings"></i>Danger</button>
                                <button type="button" class="btn btn-pink btn-flat btn-addon m-b-10"><i class="ti-search"></i>Pink</button>

                            </div>
                        </div>
                        <!-- /# card -->
                    </div>
                    <!-- /# column -->
                </div>
                <!-- /# row -->

                <div class="row">
                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-title">
                                <h4>Button Size </h4>

                            </div>
                            <div class="card-toggle-body">
                                <p class="text-muted m-b-15">
                                    Add <code>.btn-lg</code>, <code>.btn-md</code>, <code>.btn-sm</code>, or <code>.btn-xs</code> for additional sizes.
                                </p>
                                <div class="button-list">
                                    <button type="button" class="btn btn-default btn-lg m-b-10">Large</button>
                                    <button type="button" class="btn btn-primary btn-md m-b-10 m-l-5">Medium</button>
                                    <button type="button" class="btn btn-success btn-sm m-b-10 m-l-5">Small</button>
                                    <button type="button" class="btn btn-info btn-xs m-b-10 m-l-5">Extra Small</button>
                                </div>
                            </div>
                        </div>
                        <!-- /# card -->
                    </div>
                    <!-- /# column -->

                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-title">
                                <h4>Button Addon Size </h4>

                            </div>
                            <div class="card-toggle-body">
                                <p class="text-muted m-b-15">
                                    Add <code>.btn-addon.btn-lg, .btn-addon.btn-lg i </code>for button addon size.
                                </p>
                                <div class="button-list">
                                    <button type="button" class="btn btn-primary btn-flat btn-addon btn-lg m-b-10 m-l-5"><i class="ti-user"></i>Primary</button>
                                    <button type="button" class="btn btn-success btn-flat btn-addon btn-md m-b-10 m-l-5"><i class="ti-search"></i>Success</button>
                                    <button type="button" class="btn btn-info btn-flat btn-addon btn-sm m-b-10 m-l-5"><i class="ti-close"></i>Info</button>
                                    <button type="button" class="btn btn-danger btn-flat btn-addon btn-xs m-b-10"><i class="ti-settings"></i>Danger</button>
                                </div>
                            </div>
                        </div>
                        <!-- /# card -->
                    </div>
                    <!-- /# column -->
                </div>
                <!-- /# row -->
                <div class="row">
                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-title">
                                <h4>Block Level Buttons</h4>

                            </div>
                            <div class="card-toggle-body">
                                <p class="text-muted m-b-15">Add class <code>.btn-block</code> to create a block level button:</p>
                                <div class="button-list">
                                    <button type="button" class="btn btn-default btn-block m-b-10">Primary Button</button>
                                    <button type="button" class="btn btn-primary btn-block m-b-10">Primary Button</button>

                                </div>
                            </div>
                        </div>
                        <!-- /# card -->
                    </div>
                    <!-- /# column -->

                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-title">
                                <h4>Active/Disabled Buttons</h4>

                            </div>
                            <div class="card-toggle-body">
                                <p class="text-muted m-b-15">The class <code>.active</code> makes a button appear pressed, and the class <code>.disabled</code> makes a button unclickable:</p>
                                <div class="button-list">
                                    <button type="button" class="btn btn-primary active">Active Primary</button>
                                    <button type="button" class="btn btn-primary disabled">Disabled Primary</button>
                                </div>
                            </div>
                        </div>
                        <!-- /# card -->
                    </div>
                    <!-- /# column -->
                </div>
                <!-- /# row -->

                <div class="row">
                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-title">
                                <h4>Button Groups</h4>

                            </div>
                            <div class="card-toggle-body">
                                <p class="text-muted m-b-15">Use a <code>&lt;div&gt;</code> element with class <code>.btn-group</code> to create a button group:</p>
                                <div class="button-list">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-primary">Apple</button>
                                        <button type="button" class="btn btn-primary">Samsung</button>
                                        <button type="button" class="btn btn-primary">Sony</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /# card -->
                    </div>
                    <!-- /# column -->

                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-title">
                                <h4>Vertical Button Groups</h4>

                            </div>
                            <div class="card-toggle-body">
                                <p class="text-muted m-b-15">Use the class <code>.btn-group-vertical</code> to create a vertical button group:</p>
                                <div class="button-list">
                                    <div class="btn-group-vertical">
                                        <button type="button" class="btn btn-primary">Apple</button>
                                        <button type="button" class="btn btn-primary">Samsung</button>
                                        <button type="button" class="btn btn-primary">Sony</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /# card -->
                    </div>
                    <!-- /# column -->
                </div>
                <!-- /# row -->

                <div class="row">
                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-title">
                                <h4>Justified Button Groups</h4>

                            </div>
                            <div class="card-toggle-body">
                                <p class="text-muted m-b-15">To span the entire width of the screen, use the <code class="w3-codespan">.btn-group-justified</code> class:</p>
                                <div class="button-list">
                                    <div class="btn-group btn-group-justified">
                                        <a href="#" class="btn btn-primary">Apple</a>
                                        <a href="#" class="btn btn-primary">Samsung</a>
                                        <a href="#" class="btn btn-primary">Sony</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /# card -->
                    </div>
                    <!-- /# column -->

                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-title">
                                <h4>Nesting Button Groups & Dropdown Menus</h4>

                            </div>
                            <div class="card-toggle-body">
                                <p class="m-b-15">Nest button groups to create dropdown menus:</p>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-primary">Apple</button>
                                    <button type="button" class="btn btn-primary">Samsung</button>
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                                       Sony <span class="caret"></span></button>
                                        <ul class="dropdown-menu" role="menu">
                                            <li><a href="#">Tablet</a></li>
                                            <li><a href="#">Smartphone</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /# card -->
                    </div>
                    <!-- /# column -->
                </div>
                <!-- /# row -->

                <div class="row">
                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-title">
                                <h4>Split Button Dropdowns</h4>

                            </div>
                            <div class="card-toggle-body">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-primary">Sony</button>
                                    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                                       <span class="caret"></span>
                                     </button>
                                    <ul class="dropdown-menu" role="menu">
                                        <li><a href="#">Tablet</a></li>
                                        <li><a href="#">Smartphone</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <!-- /# card -->
                    </div>
                    <!-- /# column -->

                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-title">
                                <h4>Nesting Button Groups & Dropdown Menus</h4>

                            </div>
                            <div class="card-toggle-body">
                                <p class="m-b-15">Nest button groups to create dropdown menus:</p>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-primary">Apple</button>
                                    <button type="button" class="btn btn-primary">Samsung</button>
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                                       Sony <span class="caret"></span></button>
                                        <ul class="dropdown-menu" role="menu">
                                            <li><a href="#">Tablet</a></li>
                                            <li><a href="#">Smartphone</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /# card -->
                    </div>
                    <!-- /# column -->
                </div>
                <!-- /# row -->

    </div>
</template>